<template>
  <div>
    <zeda-dialog
      v-model="visible"
      width="1200px"
      title="查看详情"
      :before-close="handleClose"
    >
      <Title name="基本信息" :line="false" slot="green">
        <desc-base-info
          :data="info"
          :colnum-info="baseInfo"
          align="right"
          :no-line-height="true"
          label-width="120px"
          class="base-info"
        >
          <template slot="model">
            <dict-tag
              :options="
                info.type === 0
                  ? dict.type.device_model
                  : info.type === 1
                  ? dict.type.wmeter_device_model
                  : []
              "
              :value="info.model"
            />
          </template>
          <template slot="type">
            <dict-tag :options="dict.type.device_type" :value="info.type" />
          </template>
          <template slot="subentryType">
            <dict-tag
              :options="dict.type.subentry_type"
              :value="info.subentryType"
            />
          </template>
          <template slot="functionalType">
            <dict-tag
              :options="dict.type.device_functional_type"
              :value="info.functionalType"
            />
          </template>
          <template slot="subFunctionalType">
            <dict-tag
              :options="dict.type.device_sub_functional_type"
              :value="info.subFunctionalType"
            />
          </template>
          <template slot="qrCode">
            <vue-qr :text="info.qrCode" :size="100" :margin="0"></vue-qr>
          </template>
        </desc-base-info>
      </Title>

      <Title name="安装位置信息" :line="false" slot="green">
        <desc-base-info
          :data="info"
          :colnum-info="positionInfo"
          align="right"
          :no-line-height="true"
          label-width="120px"
          class="base-info"
        >
          <template slot="assignedType">
            <div v-if="pictureList.length > 0" class="img">
              <el-image
                v-for="(item, index) in pictureList"
                :key="index"
                :src="item"
                fit="cover"
              ></el-image>
            </div>
          </template>
        </desc-base-info>
      </Title>

      <Title name="最新能耗状态" :line="false" slot="green">
        <desc-base-info
          :data="info.emeterExtremumVo"
          :colnum-info="colnumInfo"
          align="right"
          :no-line-height="true"
          label-width="120px"
          class="base-info"
        ></desc-base-info>
      </Title>

      <Title name="巡检流水" :line="false" class="mt20">
        <el-table :data="info.deviceChecks" border max-height="500">
          <el-table-column
            prop="deviceCode"
            label="设备编码"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="checkTime"
            label="巡检时间"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="checkResult" label="巡检结果" align="center">
          </el-table-column>
          <el-table-column prop="sysUserName" label="巡检人员" align="center">
          </el-table-column>
        </el-table>
      </Title>

      <form-button
        slot="footer"
        cancel-text="关闭"
        :show-submit-button="false"
        @cancel="handleClose"
      ></form-button>
    </zeda-dialog>
  </div>
</template>
<script>
import { dealElectricity, formatDate } from "@/utils/index";
import { detail } from "@/api/iot/archives";
import vueQr from "vue-qr";
import Title from "@/components/Title";
import FormButton from "@/components/FormButton";
export default {
  dicts: [
    "device_type",
    "device_model",
    "subentry_type",
    "device_functional_type",
    "device_sub_functional_type",
    "wmeter_device_model",
  ],
  components: {
    vueQr,
    Title,
    FormButton,
  },
  props: {
    visible: { type: Boolean, default: false },
    id: { type: [String, Number], default: "" },
  },
  data() {
    return {
      pictureList: [],
      info: {},
      show: false,
    };
  },
  computed: {
    baseInfo({ info }) {
      let arr = [];
      const { model, qrCode, type } = info;
      arr = [
        { label: "设备名称", prop: "name", colNum: 3 },
        { label: "设备编码", prop: "code", colNum: 3 },
        { label: "设备类型", prop: "type", colNum: 3 },
        { label: "设备型号", prop: "model", colNum: 3 },
        { label: "职能分类", prop: "functionalType", colNum: 3 },
        { label: "功能分类", prop: "subFunctionalType", colNum: 3 },
        { label: "额定功率", prop: "ratedPower", colNum: 3, unit: "W" },
        { label: "额定电流", prop: "ratedCurrent", colNum: 3, unit: "A" },
        { label: "电流变比CT", prop: "ct", colNum: 3 },
      ];
      if (model === 2 && type === 0) {
        arr = [...arr, { label: "网关号", prop: "gatewayNo", colNum: 3 }];
      }
      if (type === 1) {
        arr = [
          ...arr,
          { label: "口径", prop: "caliber", colNum: 3, unit: "mm" },
          { label: "物联网卡号", prop: "cardNum", colNum: 3 },
        ];
      }
      arr = [
        ...arr,
        { label: "分项类型", prop: "subentryType", colNum: 3 },
        { label: "所属用能单位", prop: "sysDeptName", colNum: 3 },
        { label: "所属监测点", prop: "monitoringNetworkName", colNum: 3 },
        { label: "设备状态", prop: "statusName", colNum: 3 },
        { label: "所属厂家", prop: "manufacturer", colNum: 3 },
        { label: "质保期限", prop: "warrantyPeriod", colNum: 3, unit: "年" },
        {
          label: "使用时长",
          prop: "thisYearUsedHours",
          colNum: 3,
          unit: "h/a",
        },
        { label: "建议更换日期", prop: "suggestChangeTime", colNum: 3 },
      ];
      if (qrCode) {
        arr = [
          ...arr,
          { label: "二维码", prop: "qrCode", colNum: 1, class: "flex-start" },
        ];
      }
      return arr;
    },
    colnumInfo({ info }) {
      const { type, model } = info;
      let time = info?.emeterExtremumVo?.collectionTime ?? "暂无";
      let arr = [
        { label: "最新采集时间", value: time, colNum: 3 },
        { label: "物联网卡号", value: this.info.cardNum, colNum: 3 },
      ];
      if (type == 0 && model != 3) {
        arr = [
          ...arr,
          // { label: "审批状态", value: this.statusName, color: "#ec6324" },
          { label: "A相电压", prop: "ua", colNum: 3 },
          { label: "B相电压", prop: "ub", colNum: 3 },
          { label: "C相电压", prop: "uc", colNum: 3 },
          { label: "A相电流", prop: "ia", colNum: 3 },
          { label: "B相电流", prop: "ib", colNum: 3 },
          { label: "C相电流", prop: "ic", colNum: 3 },
          { label: "AB相电压", prop: "uab", colNum: 3 },
          { label: "BC相电压", prop: "ubc", colNum: 3 },
          { label: "AC相电压", prop: "uac", colNum: 3 },
          { label: "A相有功功率", prop: "pa", colNum: 3 },
          { label: "B相有功功率", prop: "pb", colNum: 3 },
          { label: "C相有功功率", prop: "pc", colNum: 3 },
          { label: "A相无功功率", prop: "qa", colNum: 3 },
          { label: "B相无功功率", prop: "qb", colNum: 3 },
          { label: "C相无功功率", prop: "qc", colNum: 3 },
        ];
      } else {
        arr = [
          ...arr,
          { label: "电压", prop: "ua", colNum: 3 },
          { label: "电流", prop: "ia", colNum: 3 },
          { label: "有功功率", prop: "pa", colNum: 3 },
          { label: "无功功率", prop: "qa", colNum: 3 },
        ];
      }
      return arr;
    },
    positionInfo({ info }) {
      let arr = [];
      arr = [
        { label: "安装时间", prop: "installTime", colNum: 3 },
        { label: "安装人员", prop: "installPerson", colNum: 3 },
        { label: "安装物理位置", prop: "installLocation", colNum: 3 },
        { label: "所属用能单位", prop: "sysDeptName", colNum: 3 },
        { label: "所属能耗终端", prop: "monitoringNetworkName", colNum: 3 },
        { label: "3D位置", prop: "architectureModelVo.meshName", colNum: 3 },
        {
          label: "安装现场图片",
          prop: "assignedType",
          colNum: 1,
          class: "flex-start",
        },
      ];
      return arr;
    },
  },
  watch: {
    visible(value) {
      if (value && String(this.id).length > 0) {
        this.getInfo();
      }
    },
  },
  methods: {
    getInfo() {
      const that = this;
      detail(that.id)
        .then((res) => {
          if (res.code === 700) {
            that.$message.warning(res.msg);
            return false;
          }
          console.log(res, "detail");
          that.ammeterDeal(res?.data);
        })
        .catch((err) => {
          that.info = {};
          // this.$message.error("系统错误,请联系管理员!300022");
        });
    },
    // 电表信息处理
    ammeterDeal(data) {
      let that = this;
      that.info = data;
      if (data.deviceWaterEmeterVo) {
        that.info.caliber = data.deviceWaterEmeterVo?.caliber;
        that.info.cardNum = data.deviceWaterEmeterVo?.cardNum;
      }
      that.info.ratedPower = dealElectricity(that.info.ratedPower, 1, 0);
      that.pictureList = that.info.installationPicture
        ? that.info.installationPicture.split(",")
        : [];
      if (
        that.info.emeterExtremumVo &&
        Object.keys(that.info.emeterExtremumVo.length > 0)
      ) {
        that.info.emeterExtremumVo.ua = dealElectricity(
          that.info.emeterExtremumVo.ua
        );
        that.info.emeterExtremumVo.ub = dealElectricity(
          that.info.emeterExtremumVo.ub
        );
        that.info.emeterExtremumVo.uc = dealElectricity(
          that.info.emeterExtremumVo.uc
        );
        that.info.emeterExtremumVo.uab = dealElectricity(
          that.info.emeterExtremumVo.uab
        );
        that.info.emeterExtremumVo.ubc -
          dealElectricity(that.info.emeterExtremumVo.ubc);
        that.info.emeterExtremumVo.uac = dealElectricity(
          that.info.emeterExtremumVo.uac
        );
        that.info.emeterExtremumVo.ia = dealElectricity(
          that.info.emeterExtremumVo.ia,
          1000,
          3
        );
        that.info.emeterExtremumVo.ib = dealElectricity(
          that.info.emeterExtremumVo.ib,
          1000,
          3
        );
        that.info.emeterExtremumVo.ic = dealElectricity(
          that.info.emeterExtremumVo.ic,
          1000,
          3
        );
        that.info.emeterExtremumVo.pa = dealElectricity(
          that.info.emeterExtremumVo.pa
        );
        that.info.emeterExtremumVo.pb = dealElectricity(
          that.info.emeterExtremumVo.pb
        );
        that.info.emeterExtremumVo.pc = dealElectricity(
          that.info.emeterExtremumVo.pc
        );
        that.info.emeterExtremumVo.qa = dealElectricity(
          that.info.emeterExtremumVo.qa
        );
        that.info.emeterExtremumVo.qb = dealElectricity(
          that.info.emeterExtremumVo.qb
        );
        that.info.emeterExtremumVo.qc = dealElectricity(
          that.info.emeterExtremumVo.qc
        );
      }
    },
    // // 水表信息处理
    // watermeterDeal(data) {},
    handleClose(status) {
      this.$emit("close", typeof status === "boolean" ? status : false);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";

::v-deep .el-dialog__body {
  @include scrollBar2;

  .title-container {
    padding: 20px 0;
  }
}

.img {
  .el-image {
    width: 100px;
    height: 100px;
    margin: 0 10px;
  }
}
</style>
